<template>
  <div>
      组件显示：
      <store-vue/>
      <br><br>
      本页面vuex 模块化：<br><br>
      显示卡列表：<button @click="aCard">追加卡信息</button>
      <ul>
        <li v-for="(result, index) in cardArr" :key="index">
          卡号：{{result.no}} <br>
          昵称：{{result.name}}
        </li>
      </ul>

      <br><br>
      显示图片：<button @click="aPhoto">添加图片</button>
      <ul>
        <li v-for="(result, index) in photoArr" :key="index">
          ID：{{result.no}} <br>
          昵称：{{result.name}}
        </li>
      </ul>
  </div>
</template>
<script>
  // 导入state、mapMutations、actions   
  import { mapState, mapMutations, mapActions   } from 'vuex';
  // 导入mutations
  //import { mapMutations } from 'vuex'
  // 导入actions
  //import { actions } from 'vuex'

  // 导入子组件
  import storeVue from './storeVue'

  export default {
      name:"module",
    // 导入组件
    components: {
      storeVue
    },
    data(){
      return {
      }
    },
    computed:{
        // 映射带有命名空间的state，第一个参数模块名
        ...mapState('card', {
            "cardArr": state => state.cardArr
        }),
        ...mapState('photo', {
            "photoArr": state => state.photoArr
        })
    },
    methods: {
        // 映射带有命名空间的mutations，第一个参数模块名
        //  ...mapMutations('card' ,[
        //     'addCard',
        //   ]),
        //   ...mapMutations('photo', [
        //     'addPhoto'
        //   ]),
          // 映射带有命名空间的actions，第一个参数模块名
          ...mapActions('card', [
            'addCardFun'
          ]),
          ...mapActions('photo', [
            'addPhotoFun'
          ]),
          aCard(){
            var rand = (Math.random(10) * 100).toFixed();
            var data = {name: 'zs'+rand, no: '62244000'+rand}
            // mapMutations 提交时需要带上命名空间()
            //this.$store.commit('card/addCard', data);
            //this.addCard(data);

            // 通过actions调用
            //this.$store.dispatch('card/addCardFun', data)
            this.addCardFun(data);

          },
          // 添加图片
          aPhoto(){
            var rand = (Math.random(10) * 100).toFixed();
            var data = {name: 'photo'+rand, no: '62244000'+rand}
            // 提交muations
            //this.$store.commit('photo/addPhoto', data);
            //this.addPhoto(data);

            // 调用actions
            //this.$store.dispatch('photo/addPhotoFun', data);
            this.addPhotoFun(data);
          }
    }
  }
</script>
